<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击注册新用户</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form>
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.e_mail"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="兴趣爱好">
          <el-checkbox-group v-model="form.hobby">
            <el-checkbox label="篮球" name="type"></el-checkbox>
            <el-checkbox label="足球" name="type"></el-checkbox>
            <el-checkbox label="羽毛球" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subForm">确 定</el-button>
      </span>
    </el-dialog>

  <el-table
    :data="student"
    style="width: 100%"
    max-height="250">
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="120">
    </el-table-column>
    <el-table-column
      prop="hobby"
      label="兴趣爱好"
      width="300">
    </el-table-column>
    <el-table-column
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click="del(scope.row.name)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  </div>
</template>



<script>
import axios from "axios"
  export default {
    data() {
      return {
        dialogVisible: false,
        student:[],
        form:{
          name:"",
          password:"",
          e_mail:"",
          sex:[],
          hobby:[]
        }
      };
    },
    methods: {
      // 删除数据
      del(name) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete(`http://127.0.0.1:3000/student/${name}`).then(()=>{
            // this.student.splice(id,1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getStudentList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 添加数据
      subForm(){
        axios.post("http://127.0.0.1:3000/student",{
          student : this.form
        }).then(()=>{
          this.getStudentList()
          this.dialogVisible = false
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
      },
      // 获取数据
      getStudentList(){
        axios.get("http://127.0.0.1:3000/student").then(res => {
          this.student = res.data;
          console.log(this.student)
        })
      }
    },
    created(){
      this.getStudentList()
    }
  };
</script>